<template>
  <!--  树形选择 单选12 多选13-->
  <div class="list-ui-content">
    <el-input :placeholder="treeForm.placeholder || '请选择'" v-model="item.label" :title="item.label" size="small"
              clearable readonly>
      <el-button slot="append" icon="el-icon-search" @click="selectTree" v-if="!disabled"></el-button>
      <!--        <el-button slot="append" icon="el-icon-delete" @click="clearValue" v-if="!disabled"></el-button>-->
      <i slot="suffix" class="el-input__icon el-icon-delete" @click="clearValue" v-if="!disabled && item.label"></i>

    </el-input>
    <tree-dialog :treeForm="treeForm" v-if="treeForm.open" @selectedTreeRow='selectedTreeRow' ref="treeRef"/>
  </div>
</template>

<script>
import treeDialog from "./../treeDialog.vue";

export default {
  name: "config-tree",
  components: {treeDialog},
  props: {
    item: {
      type: Object,
      default: {}
    },
    config: {
      type: Object,
      default: {}
    },
    treeForm: {
      type: Object,
      default: {}
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    clearValue() {
      this.$set(this.item, 'value', '');
      this.$set(this.item, 'label', '');
    },
    selectTree() {
      this.treeForm.open = true;
      this.$nextTick(() => {
        this.$refs.treeRef.getList();
      });
    },
    selectedTreeRow(val) {
      this.$emit('selectedTreeRow', val)
    }
  }
}
</script>

<style scoped>

</style>
